<template>
	<view class="my-demand">
		<view class="flex-row justify-between align-center">
			<view class="flex-row align-center">
				<view class="title">{{demand.demand_cate_type}}</view>
				<view class="cate">{{demand.demand_main_type}}</view>
			</view>
			<view class="date">{{demand.created_at}}</view>
		</view>
		
		<view class="padding-tb-xs">
			<view class="row">
				<text class="left">需求内容</text>
				<text class="sub">{{demand.content}}</text>
			</view>
			
			<view class="row" v-if="demand.merchant">
				<text class="left">服务商家</text>
				<text class="sub">{{demand.merchant.merchant_name}}</text>
			</view>
		</view>
		
		<view class="btns">
			<view class="btn" v-if="status[0].value.includes(demand.status)">{{status[0].text}}</view>
			<view class="btn" v-if="status[1].value.includes(demand.status)" @click="cancelDemand">{{status[1].text}}</view>
			<view class="btn on" v-if="status[2].value.includes(demand.status)" @click="toOrder">{{status[2].text}}</view>
			<view class="btn on" v-if="status[3].value.includes(demand.status)" @click="toOrder">{{status[3].text}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			demand: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				status: [
					{ text: '已取消', value: [-1] },
					{ text: '撤回需求', value: [0,1] },
					{ text: '联系商家', value: [1,2,3] },
					{ text: '查看订单', value: [2,3] },
				]
			};
		},
		methods: {
			cancelDemand() {
				this.$emit('del')
			},
			toOrder() {
				if (!this.demand.trade_no) return;
				this.$goto('/pages/order/detail?no=' + this.demand.trade_no)
			}
		}
	}
</script>

<style lang="scss">
	.my-demand {
		width: 750rpx;
		padding: 20rpx 40rpx;
		margin: 16rpx 0;
		background: rgba(255, 255, 255, 1);

		.title {
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 700;
			color: rgba(51, 51, 51, 1);
		}

		.cate {
			margin-left: 24rpx;
			font-size: 20rpx;
			padding: 4rpx 8rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(191, 191, 191, 1);
			background: rgba(245, 245, 245, 1);
			border-radius: 4rpx;
		}

		.date {
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}
		
		.row {
			font-size:24rpx;
			padding: 4rpx 0;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(51,51,51,1);
			line-height:33rpx;
			
			.left {
				margin-right: 24rpx;
				color: #333;
			}
			.sub {
				color: #666;
			}
		}
		
		.btns {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.btn {
				margin-left: 24rpx;
				width:140rpx;
				height:40rpx;
				font-size: 20rpx;
				line-height: 40rpx;
				text-align: center;
				border-radius:4rpx;
				box-sizing: content-box;
				border:1rpx solid rgba(191,191,191,1);
				
				&.on {
					color:rgba(238,188,128,1);
					border:1px solid rgba(238,188,128,1);
				}
			}
		}
	}
</style>
